<script>
import {getToken, removeToken} from "@/store/token";

export default {
  name: "Index",
  data() {
    return {active: ''}
  },
  methods: {
    getToken,
    handleCommand(command) {
      if (command === "loginout") {
        this.$message({
          message: '退出成功',
          type: 'success'
        });
        removeToken('Authorization');
        removeToken("user")
        removeToken("role")
        removeToken("tokenStartTime")
        this.$router.push({path: '/login'});
      }
    },
  }, mounted() {
    this.active = this.$route.path;
  }
}
</script>

<template>
  <el-container style="height: 100vh;">
    <el-header>
      <div class="nav">
        <div>
          期刊订阅后台管理
        </div>
        <div>
          <el-dropdown @command="handleCommand">
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="loginout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{ JSON.parse(getToken("user")).nickName }}</span>
        </div>
      </div>

    </el-header>
    <el-main>
      <el-container>
        <el-aside width="250px">
          <el-menu
              :default-active="active"
              class="el-menu-vertical-demo"
              :unique-opened="true"
              router>
            <el-menu-item index="/aHome">
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="qkManager">
              <template slot="title">
                <span>期刊</span>
              </template>
              <el-menu-item index="/qk">期刊管理</el-menu-item>
              <el-menu-item index="/qkType">期刊类型类型</el-menu-item>
            </el-submenu>
            <el-submenu index="orderManager">
              <template slot="title">
                <span>订单</span>
              </template>
              <el-menu-item index="/order">订单管理</el-menu-item>
              <el-menu-item index="/afterSale">订单售后管理</el-menu-item>
            </el-submenu>
            <el-submenu index="userManager">
              <template slot="title">
                <span>用户</span>
              </template>
              <el-menu-item index="/user">用户管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <!--<el-header height="30px">
            <el-breadcrumb separator="">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
              <el-breadcrumb-item>活动列表</el-breadcrumb-item>
              <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>
          </el-header>-->
          <el-main style="background-color: #ffffff">
            <router-view/>
          </el-main>
        </el-container>
      </el-container>
    </el-main>
  </el-container>

</template>

<style scoped>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  background-color: #ffffff;
}
</style>